import React, { createRef, Component } from 'react'
import store from '../store/index'
/* 
使用Redux的主要优势之一是它可以帮你处理应用的共享状态。如果两个组件需要访问同一状态，该怎么办？
这种两个组件同时需要访问同一状态的现象称为“共享状态”。
你可以将该状态提升到附近的父组件，但是如果该父组件在组件树中向上好几个组件的位置，
那么将状态当做属性向下一个一个地传递，这项工作很快就会变得乏味。此外，在该父组件和该子组件之间的组件甚至根本不需要访问该状态！
 */

// 需要修改reducer.js的值
export default class Redux00 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            str: store.getState().str
        }
        this.inputRef = createRef();
        store.subscribe(this.chgstr)
    }
    chg = () => {
        const val = this.inputRef.current.value;
        const action = {
            type: "add",
            data: val
        }
        store.dispatch(action);
    }
    chgstr = () => {
        console.log(store.getState().str)
        this.setState({str: store.getState().str})
    }
    render() {
        const { str } = this.state
        return (
            <div>
                {str} <br />
                <input type="text" ref={this.inputRef} placeholder={str} onChange={this.chg} />
            </div>
        )
    }
}
